<template>
	<view class="full">
		<!-- <view class="userinfo"></view> -->
		<!-- #ifndef MP-TOUTIAO -->
		<uni-nav-bar style="z-index:999;height: 100rpx;" background-color="#494f71" left-icon="left" @clickLeft="goBack" title="会员支付" :statusBar='true'></uni-nav-bar>
		<!-- #endif -->
		<view class="cardinfo">
			<view class="cardlist">
				<view :class='["card", price == 5 ? "select" : ""]' @click="selectPirce(5)">
					<text class="type">月卡</text>
					<view>
						<text>￥</text><text class="price">5</text>
					</view>
				</view>
				<view :class='["card", price == 13 ? "select" : ""]' @click="selectPirce(13)">
					<text class="type">季卡</text>
					<view>
						<text>￥</text><text class="price">13</text>
					</view>
				</view>
				<view :class='["card", price == 45 ? "select" : ""]' @click="selectPirce(45)">
					<text class="type">年卡</text>
					<view>
						<text>￥</text><text class="price">45</text>
					</view>
				</view>
			</view>
			<view>
				<u-button @click="payMoney" type="primary" text="立即开通" color="linear-gradient(to left,#4c335d, #f4ae5a)"></u-button>
			</view>
			<view>
				<u-input v-model="weixinName" @change="weiXinNameChange" placeholder="输入微信号"></u-input>
			</view>
			<view class="notify">
				<view>会员提供以下服务:</view>
				<view>1. 免除任何广告</view>
				<view>2. 无限制下载图片和视频</view>
			</view>
			<view>
				<view @click="getFreeVip">免费获取一个月会员</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { wxpay, veriyOrder } from '@/api/app/api.js'
	// import { addDate } from '@/utils/utils.js'
	export default {
		data() {
			return {
				price:5,
				weixinName: ''
			}
		},
		methods: {
			selectPirce(price){
				this.price = price
			},
			goBack(){
				wx.navigateBack()
			},
			async payMoney(){
				// const user = this.$store.getters.getUser
				// const user = {
				// 	openid: 'oSDIL5EylnJVi4LbjkvWCsR1-Bo8'
				// }
				const user = this.$store.getters.getUser
				console.log('user', user)
				wx.showLoading({
					title:'正在支付中'
				})
				const response = await wxpay({
					description: this.price == 5 ? '月卡' : this.price == 13 ? '季卡' : '年卡',
					amount:{
					    "total" : this.price * 100,
					    "currency" : "CNY"
					},
					payer:{
						openid: user.openid
					}
				})
				wx.hideLoading()
				const data = response.data
				const out_trade_no = data.out_trade_no
				if(data.package){
					wx.requestPayment({
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						signType: 'RSA',
						package: data.package,
						paySign: data.paySign,
						success: (res)=>{
							console.log('res', res)
							wx.showModal({
								title:"提示",
								content: "是否完成支付",
								success: async ()=>{
									const result = await veriyOrder({
										out_trade_no: out_trade_no
									})
									console.log('success', result)
									if (result.result.statu == 1){
										const isVipExpire = result.result.expireDate
										const isVip = 1
										this.$store.commit('setUser', {
											isVip: isVip,
											isVipExpire: isVipExpire
										})
										wx.navigateBack()
									}else{
										
									}
								},
								fail() {
									
								}
							})
						},
						fail: (err)=>{
							console.log('err', err)
							wx.showToast({
								title:"支付失败",
								icon:"error",
								duration: 1500
							})
						}
					})
				}
			},
			weiXinNameChange(val){
				console.log('val', val)
			}
		},
		created(){
			wx.hideLoading()
		}
	}
</script>

<style scoped lang="scss">
	.full{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// position: relative;
		background-image: -webkit-linear-gradient(280deg,#494f71, #000417);
		// z-index: 10;
		// justify-content: center;
		// align-items: center;
		
		
		.cardinfo{
			
			// position: absolute;
			padding: 10rpx;
			// background-color: #fff;
			// z-index: 20;
			// max-height: 75vh;
			width: 100vw;
			// margin-top: 80rpx;
			justify-content: center;
			// align-items: center;
			height: 100%;
			// left: 0;
			// right: 0;
			// display: none;
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
			
			.cardlist{
				
				display: flex;
				width: 100%;
				justify-content: space-around;
		
				.card{
					width: 210rpx;
					height: 210rpx;
					// background-color: #2a2b3b;
					background-image: linear-gradient(300deg, #000417, #494f71);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 5%;
					color: #dfcda9;
					
					.type{
						font-size: 1.2rem;
						font-weight: 500;
					}
					
					.price{
						font-size: 2rem;
						font-weight: 700;
					}
				}
				
				.select{
					// background-color: #f4efe9;
					background-image: linear-gradient(300deg,#f9e6be, #c0b193);
					transform: scale(1.05);
					transform-origin: bottom right;
					color: #000417 !important;
				}
			}
			
			.notify{
				color: #dfcda9;
				padding-left: 20rpx;
			}
		}
	}
	
	.full ::v-deep .uni-navbar--border{
		border-bottom-color:#494f71 !important;
	}
</style>
